<template>
  <div>
    <div>
    <el-row type="flex" justify="center" align="middle" class="licc-order-info-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:1100px;">
        <el-col class="licc-order-info-list-bread-E">
          <el-row>
            <el-col class="licc-order-info-list-bread-E-A"><router-link :to="{name:'allOrderInfo'}">全部订单</router-link></el-col>
            <el-col class="licc-order-info-list-bread-E-B"><router-link :to="{name:'completed'}">已完成订单</router-link></el-col>
            <el-col class="licc-order-info-list-bread-E-C"><router-link :to="{name:'payment'}">待支付订单</router-link></el-col>
            <el-col class="licc-order-info-list-bread-E-D"><router-link :to="{name:'deliverGoods'}">待发货订单</router-link></el-col>
            <el-col class="licc-order-info-list-bread-E-E"><router-link :to="{name:'receiveGoods'}">待收货订单</router-link></el-col>
            <el-col class="licc-order-info-list-bread-E-F"><router-link :to="{name:'comment'}">待评价订单</router-link></el-col>
            <el-col class="licc-order-info-list-bread-E-G"><router-link :to="{name:'returnGoods'}">退货订单</router-link></el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
    <el-row type="flex" justify="center" align="middle" class="licc-receive-goods-list-row">
      <el-row type="flex" justify="center" align="top"  style="width:1100px; background-color: #fff;min-height: 300px">
        <el-col class="licc-receive-goods-list-col">
          <el-row>
            <el-col>
              <div style="color: #aaa; height: 300px; line-height: 200px" v-show="orderInfos.length==0?true:false">暂无数据</div>
            </el-col>
          </el-row>
          <!-- 订单信息---开始 -->
          <el-row>
            <el-col>
              <table class="licc-receive-goods-table">
                <tbody valign="top"
                       v-for="(orderInfo, index) in orderInfos"
                       :key="orderInfo.id">
                <tr class="licc-receive-goods-table-tr-th">
                  <td style="border-bottom-color: #fff5f5;" colspan="7" class="licc-receive-goods-table-title">
                    <span class="dealtime">{{orderInfo.createDate}}</span>
                    <span class="number">订单号：<a>{{orderInfo.orderSn}}</a></span>
                  </td>
                </tr>
                <tr class="licc-receive-goods-table-tr-tb"
                    v-for="(orderGoodsInfo, goodsIndex) in orderInfo.orderGoods"
                    :key="orderGoodsInfo.id">
                  <td colspan="1">
                    <div class="licc-receive-goods-one-goods">
                      <el-image
                        style="width: 60px; height: 60px; cursor: pointer"
                        :src="orderGoodsInfo.goodsUrl"
                        @click.native="orderGoodsInfoClick(orderGoodsInfo.goodsId)"
                        fit="cover"></el-image>
                      <div class="licc-deliver-goods-one-goods-msg">
                        <a @click="orderGoodsInfoClick(orderGoodsInfo.goodsId)">{{orderGoodsInfo.goodsSn}}</a><br/>
                        <a @click="orderGoodsInfoClick(orderGoodsInfo.goodsId)">{{orderGoodsInfo.goodsName}}</a>
                      </div>
                    </div>
                  </td>
                  <td colspan="1">
                    <div class="licc-receive-goods-one-num">x{{orderGoodsInfo.goodsNumber}}</div>
                  </td>
                  <td colspan="1" :rowspan="orderInfo.orderGoods.length" v-show="goodsIndex==0?true:false">
                    <div class="licc-receive-goods-one-consignee">{{orderInfo.consignee}}</div>
                  </td>
                  <td colspan="1" :rowspan="orderInfo.orderGoods.length" v-show="goodsIndex==0?true:false">
                    <div class="licc-receive-goods-one-address">
                      {{orderInfo.province}}{{orderInfo.city}}{{orderInfo.district}}{{orderInfo.street}}-{{orderInfo.address}}
                    </div>
                  </td>
                  <td colspan="1" :rowspan="orderInfo.orderGoods.length" v-show="goodsIndex==0?true:false">
                    <div class="licc-receive-goods-one-price">总额 ¥{{orderInfo.goodsAmount}}</div>
                  </td>
                  <td colspan="1" :rowspan="orderInfo.orderGoods.length" v-show="goodsIndex==0?true:false">
                    <div class="licc-receive-goods-one-status">{{orderStatusText(orderInfo.orderStatus)}}</div>
                  </td>
                  <td colspan="1" :rowspan="orderInfo.orderGoods.length" v-show="goodsIndex==0?true:false">
                    <div class="licc-receive-goods-one-operation">
                      <div><a @click="orderInfoButton(orderInfo)">订单详情</a></div>
                      <div v-show="orderInfo.orderStatus==40?true:false">
                        <el-button @click="receiveInReceiveGoods(orderInfo)" class="licc-receive-goods-one-operation-button" size="mini" type="danger" plain>确认收货</el-button>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr class="licc-receive-goods-table-tr-block">
                  <td colspan="7"></td>
                </tr>
                </tbody>
              </table>
            </el-col>
          </el-row>

          <el-row>
            <el-col>
              <div class="block licc-receive-goods-table-pagination">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="pagesize"
                  layout="prev, pager, next, jumper"
                  :total="goodsTotal">
                </el-pagination>
              </div>
            </el-col>
          </el-row>
          <!-- 订单信息---结束 -->
        </el-col>
      </el-row>
    </el-row>
    </div>
    <div>
      <el-dialog
        :title="dialogOrderInfoTitle"
        :visible.sync="dialogOrderInfoVisible"
        width="60%" style="text-align: left">
        <span>
          <order-info-dialog v-if="dialogOrderInfoVisible" :message="orderInfoCheck"></order-info-dialog>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogOrderInfoVisible = false">返 回</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import orderCartApi from '@/api/order'
  import OrderInfoDialog from './components/orderInfoDialog'
  export default {
    name: 'page401',
    components: {
      OrderInfoDialog
    },
    data() {
      return {
        orderInfos:[],
        /** 选中的订单 **/
        orderInfoCheck: {},
        orderStatusValue:[
          {
            key: 10,
            text:'已完成'
          },
          {
            key: 20,
            text:'待支付'
          },
          {
            key: 30,
            text:'待发货'
          },
          {
            key: 40,
            text:'待收货'
          },
          {
            key: 50,
            text:'待评论'
          },
          {
            key: 60,
            text:'已取消'
          },
        ],
        currentPage: 1,
        pagesize:10,
        goodsTotal:0,
        /**订单详情**/
        dialogOrderInfoVisible:false,
        /** 订单详情标题 **/
        dialogOrderInfoTitle:''
      }
    },
    created(){
      this.initPage();
    },
    methods: {
      initPage() {
        let params = {
          orderStatusList:[40],
          currentPage: this.currentPage,
          pagesize:this.pagesize
        }
        orderCartApi.initAllOrderInfo(params).then(res => {
          /** 获取到分页订单信息 **/
          this.orderInfos = [];
          this.orderInfos = res.data.records;
          this.goodsTotal = res.data.total;
        }).catch(() => {

        })
      },
      /** 分页--开始 **/
      handleSizeChange(val) {
        this.pagesize = val;
        this.initPage();
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.initPage();
        console.log(`当前页: ${val}`);
      },
      /** 分页--结束 **/
      orderStatusText(value){
        console.log(value);
        /** 拿到该行的值，然后遍历reviewStatusFilters拿到对应标签的名称 **/
        for (let i = 0; i < this.orderStatusValue.length; i++){
          if (value === this.orderStatusValue[i].key){
            return this.orderStatusValue[i].text;
          }
        }
        return value;
      },
      /** 订单详情 **/
      orderInfoButton(orderInfo){
        this.dialogOrderInfoTitle = "订单号："+orderInfo.orderSn + " - 状态："+this.orderStatusText(orderInfo.orderStatus);
        this.orderInfoCheck = orderInfo;
        this.dialogOrderInfoVisible = true;
      },
      /** 订单确认收货 **/
      receiveInReceiveGoods(orderInfoValue){
        this.$confirm('确定已收到商品', '确定收货', {
          confirmButtonText: '确定',
          cancelButtonText: '点错了',
          type: 'warning'
        }).then(() => {
          orderCartApi.payOrder({id:orderInfoValue.id,orderStatus:50}).then(res => {
            this.$notify({title: '成功', message: '订单“'+orderInfoValue.orderSn+'”商品已成功收到', type: 'success'});
            this.initPage();
          }).catch(() => {
            this.$notify.info({title: '提示', message: '系统繁忙，请稍后再试', type: 'success'});
          })
        }).catch(() => {
          this.$notify({title: '提示', message: '已取消确定收货', type: 'success'});
        });
      },
      orderGoodsInfoClick(goodsId){
        this.$router.push({path:'/goodsInfo',query:{goodsId:goodsId,catId:"0000001"}});
      }
    }
  }
</script>
<style>
  .licc-order-info-top-row{
    width: 100%;
    margin-top: 20px;
  }
  .licc-order-info-list-bread-E{
    width: 1100px;
    text-align: left;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    background-color: #fff;;
  }
  .licc-order-info-list-bread-E a{
    color: #606266;
    text-decoration: none;
    cursor: pointer;
    outline: 0;
  }
  .licc-order-info-list-bread-E a:hover{
    color: #409eff;
  }
  .licc-order-info-list-bread-E-A,.licc-order-info-list-bread-E-B,.licc-order-info-list-bread-E-C,.licc-order-info-list-bread-E-D,.licc-order-info-list-bread-E-E,.licc-order-info-list-bread-E-F,.licc-order-info-list-bread-E-G{
    text-align: center;
    width: 100px;
    border-bottom: 0px;
  }
  .licc-order-info-list-bread-E-E{
    color: #409eff;
    border-bottom: 1px solid #409eff;
  }
  .licc-order-info-list-bread-E-E a{
    color: #409eff;
  }
  /** 顶部结束 **/
  .licc-receive-goods-list-row{
    width: 100%;
    margin-top: 20px;
  }
  .licc-receive-goods-list-col{
    width: 1100px;
    padding: 10px;
  }
  /** 表格 **/
  .licc-receive-goods-table {
    border-collapse: collapse;
    width: 100%;
    font: 13px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .licc-receive-goods-table-tr-th td{
    border: 1px solid #e5e5e5;
  }
  .licc-receive-goods-table-tr-th{
    background: #f5f5f5;
    height: 31px;
    line-height: 31px;
    color: #aaa;
    overflow: hidden;
  }
  .licc-receive-goods-table-tr-tb td{
    border: 1px solid #e5e5e5;
    padding: 14px 0;
  }
  .licc-receive-goods-table-title{
    border-bottom-color: #fff5f5;
    text-align: left;
  }
  .licc-receive-goods-table-title>.dealtime{
    margin-right: 30px;
    font-family: verdana;
    float: left;
    height: 18px;
    line-height: 18px;
    padding: 2px 0px 0px 10px;
  }
  .licc-receive-goods-table-title>.number{
    width: 226px;
    font-family: verdana;
    float: left;
    height: 18px;
    line-height: 18px;
    padding: 2px 0 0;
  }
  .licc-receive-goods-table-title a{
    color: #333;
    text-decoration: none;
  }
  /**/
  .licc-receive-goods-one-goods{
    width: 400px;
    /*width: 20px;*/
    padding-left: 10px;
  }
  .licc-receive-goods-one-goods > .el-image {
    display: block;
    float: left;
  }
  .licc-receive-goods-one-goods-msg{
    float: left;
    padding-left: 10px;
    width: 300px;
    height: 36px;
    line-height: 18px;
    overflow: hidden;
    color: #333;
    text-align: left;
  }
  .licc-receive-goods-one-num{
    width: 110px;
    color: #aaa;
  }
  .licc-receive-goods-one-consignee{
    color: #AAA;
    width: 100px;
  }
  .licc-receive-goods-one-address{
    width: 140px;
    padding-left: 5px;
    padding-right: 5px;
    color: #AAA;
  }
  .licc-receive-goods-one-price{
    color: #AAA;
    width: 100px;
  }
  .licc-receive-goods-one-status{
    width: 80px;
    color: #AAA;
  }
  .licc-receive-goods-one-operation{
    width: 120px;
  }
  .licc-receive-goods-one-operation-button {
    padding: 3px 10px;
  }

  .licc-receive-goods-table-tr-block{
    height: 20px;
  }
  .licc-receive-goods-table-pagination{
    float: right;
  }
</style>
